<template>
  <div class="home">

    <!--
    <div class="homeHeader" data-spm="home-header">
        <div class="greeting" style="padding-bottom: 20px;">
            <h1>
              <i class="fas fa-feather-alt"></i> 当前应用
              <span class="title-label">
                {{ currentApp.applicationName }}
              </span>
            </h1>
        </div>
    </div>
    -->

    <el-container>
      <el-main>
        <div class="app-container">
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="WidgetHomeProductMy-detailContainer-3W8nd">
                <h3 class="h3-title">
                  <span tooltipicon="help" class="nb-rc-text product-title">
                    <span class="the-text">快速开始</span>
                  </span>
                </h3>
                <ul class="product_list thm-uglier">
<!--                  <li class="product_list_li count-li">-->
<!--                    <div class="text-title">切换应用</div>-->
<!--                    <div class="text-descript">-->
<!--                      这个是一个SaaS版在线管理系统，需要选择一个应用进入下一步操作-->
<!--                    </div>-->
<!--                    <div class="count-text-button">-->
<!--                      <button-->
<!--                        type="button"-->
<!--                        class="next-btn next-medium next-btn-primary"-->
<!--                        @click="$router.push('/components/Layout/TopHeader/application')"-->
<!--                      >-->
<!--                        <i class="fas fa-exchange-alt"></i> 切换应用-->
<!--                      </button>-->
<!--                    </div>-->
<!--                  </li>-->
                  <li class="product_list_li count-li">
                    <div class="text-title">创建应用</div>
                    <div class="text-descript">
                      快速创建一个SaaS版RBAC的管理后台，快速实现后台权限管理系统
                    </div>
                    <div class="count-text-button">
                      <button
                        type="button"
                        class="next-btn next-medium next-btn-primary"
                        @click="$router.push('/views/portal/ucenter/project/list')"
                      >
                        <i class="fas fa-rocket"></i> 快速创建
                      </button>
                    </div>
                  </li>
                  <li class="product_list_li count-li">
                    <div class="text-title">账号管理</div>
                    <div class="text-descript">
                      进入账号管理界面，快速实现后台权限账号管理
                    </div>
                    <div class="count-text-button">
                      <button
                        type="button"
                        class="next-btn next-medium next-btn-primary"
                        @click="$router.push('/views/portal/ucenter/account/list')"
                      >
                        <i class="fas fa-rocket"></i> 创建账号
                      </button>
                    </div>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="WidgetHomeProductMy-detailContainer-3W8nd">
                <h3 class="h3-title">
                       <span tooltipicon="help" class="nb-rc-text product-title">
                           <span class="the-text">开发教程</span>
                       </span>
                </h3>
                <div style="position: relative; overflow: hidden; width: 100%; height: 250px;">
                  <div style="position: absolute; inset: 0px; overflow: scroll; margin-right: -17px; margin-bottom: -17px;">
                    <ul class="product_list thm-uglier">
                      <li class="product_list_li" v-for="(item , index) in learnDocumentArr" :key="index">
                        <div class="text-title">
                          <a :href="item.link" target="_blank"> {{ item.title }} </a>
                          <span class="text-icons"><i class="fas fa-chevron-right"></i></span>
                        </div>
                        <div class="text-descript">
                          {{ item.desc }}
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-aside width="30%">
        <aside-count />
      </el-aside>
    </el-container>

  </div>
</template>

<script>
import AsideCount from "./aside-count";
import ProjectChoice from '@/views/portal/ucenter/project/choice'
import {choiceApplication, projectInfo} from '@/api/authority/Home';

export default {
  name: "index",
  data() {
    return {
      currentApp: {
          applicationName: '未选择应用'
      },
      learnDocumentArr: [
        {
          title: "接入权限基本架构",
          status: "1",
          desc: "介绍权限架构和使用说明，权限服务集成思路和架构",
          link: "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/07_%E6%9D%83%E9%99%90%E7%94%A8%E6%88%B7%E9%9B%86%E6%88%90.html",
        },
        {
          title: "应用接入权限服务",
          status: "1",
          desc: "新旧应用集成场景，统一认证权限体系",
          link: "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/08_%E5%BE%AE%E6%9C%8D%E5%8A%A1%E9%9B%86%E6%88%90.html",
        },
        {
          title: "微服务集成",
          status: "0",
          desc: "与第三方微服务集成，兼容多种微服务体系",
          link: "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/08_%E5%BE%AE%E6%9C%8D%E5%8A%A1%E9%9B%86%E6%88%90.html",
        },
        {
          title: "单点登陆认证集成",
          status: "0",
          desc: "集成Oauth2等多种权限框架教程，便于集成第三方单点系统",
          link: "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/12_JWT%E9%9B%86%E6%88%90.html",
        },
        {
          title: "自定义登陆主题",
          status: "0",
          desc: "自定义应用登陆的主题界面，包括背景和登陆logo、标题等配置",
          link: "http://alinesno-platform.linesno.com/technique/01_%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF/41_%E8%87%AA%E5%AE%9A%E4%B9%89%E7%99%BB%E9%99%86%E4%B8%BB%E9%A2%98.html",
        },
        {
          title: "单点登陆集成",
          status: "0",
          desc: "集成Nginx/Cas/Oauth2等多种权限框架教程，便于集成第三方单点系统",
          link: "http://alinesno-platform.linesno.com/technique/13_%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/06_%E7%99%BB%E9%99%86%E8%AE%A4%E8%AF%81%E9%9B%86%E6%88%90.html",
        },
      ],
    };
  },
  components: {
    AsideCount,
    ProjectChoice ,
  },
  mounted() {
    // this.getProjectInfo();
  },
  methods: {
    getProjectInfo(){
      projectInfo().then(response=>{

        var data = response.data ;

        if(data == 'SEL_APP'){
          this.appSelectDialogTableVisible = true ;
        }else{
          this.currentApp = response.currentApp ;

          // this.$notify({
          //   title: '成功',
          //   message: '切换到应用' + this.currentApp.applicationName + ' , 请注意数据的切换',
          //   type: 'success'
          // });

        }
      }) ;
    } ,
    goTarget(href) {
      window.open(href, "_blank");
    },
    selectApp(row){
      console.log('row = ' + row);
      choiceApplication(row.id).then(response => {
         if(response.code == 200){
            this.appSelectDialogTableVisible = false ;
            this.getProjectInfo();

         }
      })
    }
  },
};
</script>

<style scoped lang="scss">
@import url("http://static.cloud.linesno.com/asserts/vendors/fontawesome/css/all.css");

.homeHeader {
  position: relative;
  box-sizing: border-box;
  padding: 24px 24px 0;
  background-color: #fff;
  box-shadow: 0 1px 0 0 #e3e4e6;
  z-index: 1;

  .title-label{
      font-weight: 400;
      margin-left: 10px;
  }

}

.homeHeader h1 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #333;
  // line-height: 24px;
}

.app-container {
  background-color: #fafafa;
}

.widget-title {
  font-size: 14px;
  color: #333;
  line-height: 24px;
  font-weight: 400;
  //    float: left;
  width: 100%;
}

.app-icon {
  width: 32px;
  height: 32px;
  position: relative;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 2px;
  background: #fff;
  padding: 20px !important ;
  padding-left: 20px !important ;
  padding-right: 20px !important ;
  border: var(--card-border-width, 1px) var(--card-border-style, solid)
    var(--card-border-color, #e3e4e6);
}

.el-col-8 {
  width: calc(33.3333333333% - 10px);
  margin-left: 10px;
}

.widget-bulletin-list .item {
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12px;

  a {
    color: #555;
  }
}

.product_list_li:nth-child(3),
.product_list_li:nth-child(6) {
  border-right: 0px;
}

.product_list_li {
  width: 33% !important;
  padding: 8px !important;
  border-radius: 0px !important;
  border-right: 1px solid #eee;

  .text-title {
    font-size: 16px;
    color: #333;
    letter-spacing: 0;
    line-height: 24px;

    span.recom-label {
      color: #005bd4;
      font-weight: 700;
      border: 1px solid #005bd4;
      border-radius: 3px;
      padding: 2px;
      position: absolute;
      line-height: 18px;
      font-size: 8px;
    }
  }

  .text-descript {
    margin-top: 8px;
    font-size: 13px;
    color: #333;
    letter-spacing: 0.37px;
    line-height: 20px;
  }
}

.widget-bulletin-list {
  .line {
    position: absolute;
    left: -16px;
    right: -16px;
    height: 1px;
    background-color: #e3e4e6;
  }
  .pin {
    position: relative;
    margin-bottom: 15px;
    margin-top: 15px;

    .msg {
      padding: 8px 12px;
      line-height: 18px;
      color: #333;
      font-size: 12px;
      background-color: #eff3f8;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      margin-bottom: 16px;
    }
  }
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.next-col-4 {
  -ms-flex: 0 0 16.66667%;
  -webkit-flex: 0 0 16.66667%;
  flex: 0 0 16.66667%;
  width: 16.66667%;
  max-width: 16.66667%;
  float: left;
}

.subtitle {
  font-weight: 500;
  font-size: 12px;
  color: #666;
  line-height: 20px;
  margin: 16px 0 8px;
}

.thm-uglier {
  list-style: none;
  margin: 0;
  padding: 0;
}

.product_list {
  a {
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: #333;
    transition: all 250ms linear;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.product_list > li {
  padding: 0 8px 8px 0;
  overflow: hidden;
  flex: none;
  float: left;
  border-radius: 4px;

  a {
    line-height: 42px;

    i {
      display: none;
      border: 1px solid #dedede;
      border-radius: 14px;
      width: 28px;
      height: 28px;
      text-align: center;
    }
  }

  .WidgetHomeProductMy-product_name-TNtW6 {
    flex: 1;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.h3-title {
  font-size: 16px;
  font-weight: 500;
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 16px;
}

.text-icons {
  float: right;
  margin-right: 10px;
  font-size: 16px;
  font-weight: 200;
  color: #ccc;
}

li.product_list_li.count-li {
  background: url(https://img.alicdn.com/tfs/TB1uQ8uVLb2gK0jSZK9XXaEgFXa-816-160.png)
    0% 0% / 100% 100% no-repeat;
  width: calc(50% - 16px) !important;
  height: 140px;
  border-right: 0px;
  border-radius: 5px !important;
  margin: 0px 0px 16px 16px !important;
}

.count-text-button > button {
  padding: 0 16px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  border-width: 1px;
  border-style: solid;
  background-color: #005bd4;
  border-color: transparent;
  margin-top: 20px;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}

.el-main,
.el-aside {
  padding: 0px;
  background: #fafafa !important ;
}

.el-aside {
  padding: 20px 10px;
}

.secondary {
  font-weight: 500;
  margin-left: 5px;
  padding-left: 0;
}
</style>


